<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>网易云音乐</title>
    <!-- 可以让部分国产浏览器默认采用高速模式渲染页面 -->
    <meta name="renderer" content="webkit">
    <!-- 为了让IE浏览器运行最新的渲染模式下 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="keywords"
        content="网易云音乐，音乐，播放器，网易，下载，播放，DJ，免费，明星，精选，歌单，识别音乐，收藏，分享音乐，音乐互动，高音质，320K，音乐社交，官网，移动站，music.163.com">
    <meta name="description" content="网易云音乐是一款专注于发现与分享的音乐产品，依托专业音乐人、DJ、好友推荐及社交功能，为用户打造全新的音乐生活。">
    <link rel="shortcut icon" href="./../favicon.ico">
    <!--    apple-touch-icon:是苹果私有属性
    作用:指定将网页保存到主屏幕上的时候的图标 -->
    <link rel="apple-touch-icon" href="./../apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="114x114" href="./../apple-touch-icon114.png">
    <link rel="apple-touch-icon" sizes="152x152" href="./../apple-touch-icon152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="./../apple-touch-icon180.png">
    <script>
        let scale = 1.0 / window.devicePixelRatio;
        let text = `<meta name="viewport" content="width=device-width, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scalable=no">`
        document.write(text);
        document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px";
    </script>
    <link rel="stylesheet" href="./../css/reset.css">
    <link rel="stylesheet" href="./../css/swiper.css">
    <link rel="stylesheet/less" href="css/index.less">
</head>

<body>
    <!-- 
    1.双飞翼布局
    1.1搞一个容器,在容器中方三个子元素
    1.2在中间的元素中再放一个元素
    1.3设置两边的尺寸,设置中间的宽度等于100%
    1.4设置中间元素里面的盒子的margin为两边的宽度
    1.5让三个盒子往统一方向浮动
    
 -->
    <!-- 头部 Start -->
    <div class="header"></div>
    <!-- 头部 End -->
    <!-- 内容 Start -->
    <div class="main">
        <div class="main-in">
            <div class="pull-down">
                <img src="./../images/pull-down.png" alt="">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                    width="60px" height="60px" viewBox="279.747 366.016 60 60"
                    enable-background="new 279.747 366.016 60 60" xml:space="preserve">
                    <path id="refreshLogo" stroke-dasharray="" stroke-dashoffset="" fill="none" stroke="#000000"
                        stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M301.144,374.58
	c-16.549,5.334-25.163,23.41-15.075,37.437c8.615,12.051,26.864,15.606,40.692,8.001c10.995-6.025,14.282-18.768,7.368-28.349
	c-5.555-7.705-17.229-9.977-26.07-5.137c-7.027,3.853-8.614,10.767-5.44,16.298c3.06,5.137,11.221,5.631,15.302,2.667
	c5.44-4.05,4.193-10.568,1.474-15.31c-14.282-25.09,7.254-24.694,9.975-18.966" />
                </svg>
            </div>

            <!-- banner start -->
            <div class="swiper">
                <div class="swiper-wrapper">
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
            </div>
            <!-- banner END -->

            <!-- 顶部导航 start -->
            <div class="nav">
                <ul>
                    <li>
                        <P>
                            <img src="./../images/home-it666-rl.png" alt="">
                            <i>12</i>
                        </P>
                        <span>每日推荐</span>
                    </li>
                    <li>
                        <img src="./../images/home-it666-gd.png" alt="">
                        <span>歌单</span>
                    </li>
                    <li>
                        <img src="./../images/home-it666-phb.png" alt="">
                        <span>排行榜</span>
                    </li>
                    <li>
                        <img src="./../images/home-it666-dt.png" alt="">
                        <span>电台</span>
                    </li>
                    <li>
                        <img src="./../images/home-it666-zb.png" alt="">
                        <span>直播</span>
                    </li>
                </ul>
            </div>
            <!-- 顶部导航 end -->

            <div class="recommend"></div>
            <div class="exclusive"></div>
            <div class="album"></div>
            <div class="mv"></div>
            <div class="dj"></div>

            <!-- 上拉加载 start -->
            <div class="pull-up">
                <p>
                    <img src="./../images/pull-up.gif" alt="">
                    <span>上拉加载更多</span>
                </p>
            </div>
            <!-- 上拉加载 end -->
        </div>
    </div>
    <script id="bannerSlide" type="text/html">
        <% for(let i = 0; i < banners.length; i++){%>
        <div class="swiper-slide">
            <img src="<%=banners[i].pic%>" alt="" class="fluid-img">
            <span style="background: <%=banners[i].titleColor%>"><%=banners[i].typeTitle%></span>
        </div>
        <%}%>
    </script>
    <script id="category" type="text/html">
        <div class="category">
            <div class="category-top">
                <h3><%=title%></h3>
                <span><%=subTitle%></span>
            </div>
            <div class="category-bottom">
                <ul>
                    <%for(let i = 0; i < result.length; i++){%>
                    <li style="width: <%=result[i].width%>rem">
                        <div>
                            <img src="<%=result[i].picUrl%>" class="fluid-img">
                            <% if(title === "推荐歌单") {%>
                            <p class="p1">
                                <img src="./../images/home-small-play.png" alt="">
                                
                                <span><%=result[i].playCount%></span>
                            </p>
                            <%}else if(title === "独家放送"){%>
                            <p class="p2">
                                <img src="./../images/home-small-exclusive.png" alt="">
                            </p>
                            <%}else if(title === "主播电台"){%>
                            <p class="p3">
                                <img src="./../images/home-small-dj.png" alt="">
                            </p>
                            <%}%>
                        </div>
                        <p class="category-title" ><%=result[i].name%></p>
                        <p class="category-singer" ><%=result[i].artistName %></p>
                    </li>
                    <%}%>
                </ul>
            </div>
        </div>
    </script>
    
    <!-- 内容 End -->
    <!-- 底部start -->
    <div class="footer"></div>
    <!-- 底部end -->
    <script src="./../js/less.js"></script>
    <script src="./../js/zepto.js"></script>
    <script src="./../js/fx.js"></script>
    <script src="./../js/fx_methods.js"></script>
    <script src="./../js/iscroll-probe.js"></script>
    <script src="./../js/swiper.js"></script>
    <script src="./../js/axios.js"></script>
    <script src="./../js/api.js"></script>
    <script src="./../js/template-web.js"></script>
    <script src="./../js/clamp.js"></script>
    <script src="./../js/tools.js"></script>
    <script src="js/index.js"></script>

</body>

</html>